<template>
    <div class="comment-container">
        <h3>发表评论</h3>
        <hr>
        <textarea  placeholder="请输入想说的话（不超过120字）" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="postcomments">发表评论</mt-button>
        <div class="comment-list">
            <div class="comment-item" v-for="(item,i) in comments" :key="item.add_time">
                <div class="comment-title">
                    第{{i+1}}楼&nbsp;&nbsp; 用户：{{item.user_name}}&nbsp;&nbsp;发表时间：{{item.add_time | dateFormat}} 
                </div>
                <div class="comment-body">
                    {{item.content}}
                </div>
            </div>
        </div>
        <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
import {Toast} from 'mint-ui';
export default {
    data(){
        return {
           pageIndex: 1,
           comments: [],
           msg:'',
        };
    },
    created(){
        this.getComments();
    },
    methods:{
        getComments(){
            this.$http.get("api/getcomments/"+this.id +"?pageindex=" +this.pageIndex).then(result=>{
                if(result.body.status === 0){
                    this.comments = this.comments.concat(result.body.message)
                }else{
                    Toast("获取评论失败！")
                }

            })
        },
        getMore(){
            this.pageIndex++;
            this.getComments();
            console.log("加载成功！")

        },
        postcomments(){
            if(this.msg.trim().length === 0){
                return Toast("评论不能为空！")
            }
            this.$http.post("api/postcomment/" + this.$route.params.id,
                            {content :this.msg.trim()
            }).then(function(result){
                console.log(result)
                if(result.body.status===0){
                
                    var comm={
                        user_name: '匿名用户',
                        add_time: Date.now(),
                        content: this.msg.trim()

                    };
                    this.comments.unshift(comm);
                    this.msg='';
                }
            })



        }
    },
     props: ["id"],
    
};
</script>

<style lang="scss" scoped>
.comment-container{
    padding: 10px 5px;
    h3{font-size: 17px}
    textarea{
        font-size: 14px;
        margin-bottom: 0;
    }
    .comment-list{
        margin: 10px 0;
       .comment-item{
           font-size: 12px;
           
            .comment-title{
               background-color: #ccc;
               line-height: 21px;
            }
            .comment-body{
               line-height: 21px;
               text-indent: 2em;
            }
       } 
    }
    
}

</style>